<script setup lang="ts">
import {ref} from "vue";
import { useRouter } from 'vue-router';
import FixedNav from "@/components/fixedNav/fixedNav.vue";
import Bottom from "@/components/bottom/bottom.vue";

const activeNav = ref('4') // 默认选中首页
const activeSubNav = ref('')

// 定义路由的跳转
const router = useRouter();
const navigateTo = (path: string) => {
  router.push(path);
};
</script>

<template>
  <div class="mainContain">
    <fixed-nav v-model:active-nav="activeNav"
               v-model:active-sub-nav="activeSubNav"></fixed-nav>

    <div class="zhiyouColumnSection1">
      <img
          src="@/assets/images/zhiyouColumnSection1.png"
          class="section1-image"
          alt="主视觉图"
      >
    </div>

    <div class="zhiyouColumnSection2">
      <span class="columnItemDetailTitle">淘宝天猫京东商品sku价格信息监测采集</span>
      <span class="columnItemDetailText1">以下是目前市面上常见的淘宝、天猫、京东SKU价格信息采集工具，按功能和平台分类介绍：</span>
      <img src="@/assets/images/zhiyouColumnItemImg.png" class="columnItemDetailImg" alt="columnItemDetailImg">
      <span class="columnItemDetailText2">
        <span class="columnItemDetailSubTitle columnItemDetailSubTitle1">1. 九转数据</span><br>
        <span class="columnItemDetailSubContent columnItemDetailSubContent1">
          功能：支持淘宝、天猫、京东等多个主流电商平台的SKU价格信息采集，可采集商品详情、价格、库存、评价等多种数据。<br>
          特点：<br>
          提供7×24小时实时监控，支持分钟级价格变动预警。<br>
          支持多种数据导出格式（如Excel、CSV、数据库等）。<br>
          适用于品牌监控、竞品分析、价格策略优化等场景。
        </span><br><br>


        <span class="columnItemDetailSubTitle columnItemDetailSubTitle2">2. 鼎点数据</span><br>
<span class="columnItemDetailSubContent columnItemDetailSubContent1">
        功能：支持淘宝、天猫、京东等平台的SKU价格信息采集，包括挂牌价和到手价。<br>
        特点：<br>
        提供全网价格监控系统，支持促销优惠信息和券后价监测。<br>
        适用于品牌商家进行价格管理和市场分析。
</span><br><br>


        <span class="columnItemDetailSubTitle columnItemDetailSubTitle3">3. 破军星工具箱</span><br>
<span class="columnItemDetailSubContent columnItemDetailSubContent1">
        功能：支持淘宝、天猫、京东等平台的SKU价格信息采集。<br>
        特点：<br>
        提供店铺宝贝采集、关键词采集、SKU采集等功能。<br>
        支持通过商品链接直接采集SKU信息，包括价格、库存、组合ID等。
</span><br><br>


        <span class="columnItemDetailSubTitle columnItemDetailSubTitle4">4. 图快下载器</span><br>
<span class="columnItemDetailSubContent columnItemDetailSubContent1">
        功能：支持淘宝、天猫、京东等平台的商品信息采集，包括SKU价格、库存等。<br>
        特点：<br>
        支持整店采集和关键词搜索采集。<br>
        提供商品标题、链接、属性、价格等信息的Excel导出。
</span>

      </span>
      <div class="columnDetailRight">
<span class="day">28</span>
        <div class="line1"></div>
        <span class="yearAndMonth">2025-03</span>
        <span class="rightTitle">最新动态</span>
        <div class="line2"></div>
        <span class="title title1">淘宝天猫京东商品sku价格信息监测采集</span>
        <span class="date date1">2025-03-07</span>
        <span class="title title2">淘宝天猫京东商品sku价格</span>
        <span class="date date2">2025-03-01</span>
        <span class="title title3">淘宝天猫京东商品sku价格</span>
        <span class="date date3">2025-03-01</span>
        <span class="title title4">淘宝天猫京东商品sku价格</span>
        <span class="date date4">2025-03-01</span>
        <span class="title title5">淘宝天猫京东商品sku价格</span>
        <span class="date date5">2025-03-01</span>
      </div>
      <button class="bottomButton"@click="navigateTo('/zhiyouyun/zhiyouColumn')">返回列表</button>
    </div>


    <!--底部内容-->
    <bottom/>
  </div>
</template>

<style scoped>
.mainContain {
  width: 1920px;
  margin: 0 auto;
  padding: 0;
  position: relative;
  left: -8px; /* 新增向左微调 */
  top: -8px;
  box-sizing: border-box; /* 新增盒模型计算方式 */
  background-color: #101010;
}

.zhiyouColumnSection1 {

  height: 680px;
  width: 100%; /* 确保宽度100% */
  background-image: url('@/assets/bk/zhiyouColumnbkSection1.png'); /* 替换为实际图片路径 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

.section1-image {
  position: absolute;
  top: 310px;
  left: 410px;
  width: 1100px;
  /* height: 68px; */
}

.zhiyouColumnSection2 {
  height: 1852px;
  background-color: #101010;
  position: relative;
}
.columnItemDetailTitle {
  font-family: "AlibabaPuHuiTi_2_105_Heavy", sans-serif;
  font-size: 40px;
  color: #FFFFFF;
  line-height: 56px;
  text-align: left;
  font-style: normal;
  position: absolute;
  top: 80px;
  left: 360px;
}
.columnItemDetailText1 {
  height: 28px;
  font-family: "AlibabaPuHuiTi_2_55_Regular", sans-serif;
  font-size: 20px;
  color: #FFFFFF;
  line-height: 28px;
  text-align: justify;
  font-style: normal;
  position: absolute;
  top: 156px;
  left: 360px;
}
.columnItemDetailImg {
  width: 848px;
  height: 480px;
  position: absolute;
  top: 204px;
  left: 360px;
  border-radius: 24px;
}
.columnItemDetailText2 {
  width: 848px;
  height: 748px;
  font-family: "AlibabaPuHuiTi_2_85_Bold", sans-serif;
  font-size: 28px;
  color: #FFFFFF;
  line-height: 40px;
  text-align: justify;
  font-style: normal;
  position: absolute;
  top: 704px;
  left: 360px;
}
.columnItemDetailSubTitle{
  font-weight: bold;
}
.columnItemDetailSubContent{
  font-size: 18px;
  line-height: 20px;
}
.columnDetailRight {
  width: 320px;
  height: 641px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  position: absolute;
  top: 80px;
  left: 1240px;
}
.day {
  width: 48px;
  height: 56px;
  font-family: "AlibabaPuHuiTi_2_105_Heavy", sans-serif;
  font-size: 40px;
  color: #FFFFFF;
  line-height: 56px;
  text-align: left;
  font-style: normal;
  position: absolute;
  top: 24px;
  left: 24px;
}
.line1 {
  width: 40px;
  height: 4px;
  background: #FF6600;
  border-radius: 2px;
  position: absolute;
  top: 88px;
  left: 24px;
}
.yearAndMonth {
  height: 28px;
  font-family: "AlibabaPuHuiTi_2_55_Regular", sans-serif;
  font-size: 20px;
  color: #FFFFFF;
  line-height: 28px;
  text-align: left;
  font-style: normal;
  position: absolute;
  top: 104px;
  left: 24px;
}
.rightTitle {
  height: 30px;
  font-family: "AlibabaPuHuiTi_2_85_Bold", sans-serif;
  font-size: 22px;
  color: #FFFFFF;
  line-height: 30px;
  text-align: left;
  font-style: normal;
  position: absolute;
  top: 156px;
  left: 24px;
}
.line2 {
  width: 272px;
  height: 1px;
  background: #3A3A3A;
  border-radius: 1px;
  position: absolute;
  top: 198px;
  left: 24px;
}
.title {
  width: 272px;
  font-family: "AlibabaPuHuiTi_2_55_Regular", sans-serif;
  font-size: 20px;
  color: #FFFFFF;
  line-height: 28px;
  text-align: left;
  font-style: normal;
  position: absolute;
  left: 24px;
}
.title1{
  top: 223px;
}
.title2{
  top: 329px;
}
.title3{
  top: 407px;
}
.title4{
  top: 485px;
}
.title5{
  top: 563px;
}
.date {
  height: 22px;
  font-family: "AlibabaPuHuiTi_2_55_Regular", sans-serif;
  font-size: 16px;
  color: #FFFFFF;
  line-height: 22px;
  text-align: left;
  font-style: normal;
  opacity: 0.4;
  position: absolute;
  left: 24px;
}
.date1{
  top: 283px;
}
.date2{
  top: 361px;
}
.date3{
  top: 439px;
}
.date4{
  top: 517px;
}
.date5{
  top: 595px;
}
.bottomButton {
  width: 240px;
  height: 64px;
  background: linear-gradient(90deg, #FFB23D 0%, #FF6600 100%);
  box-shadow: 0px 0px 8px 2px rgba(255, 102, 0, 0.6);
  border-radius: 12px;
  position: absolute;
  top: 1740px;
  left: 840px;
  font-family: "AlibabaPuHuiTi_2_105_Heavy", sans-serif;
  font-size: 24px;
  color: #FFFFFF;
  line-height: 33px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

</style>